<style scoped>
.formitem{
    padding: 0 30px;
}
.wraper {
    
}
.result {
    text-align: center;
    font-size:20px;
    padding-bottom:100px;
}
.fee-con {
    padding: 0 30px;
}

.fee-card {
    margin-bottom: 10px;
}

.fee-card-head {
    background-color: #e4eaec;
    line-height: 38px;
    border: 1px solid #ddd;
}
.fee-card-head h3{
    text-align: center;
    font-size: 16px;
}
.fee-card-title {
    font-size: 14px;
    color: #333;
    font-weight: bold;
    padding-left: 20px;
}

.fee-card-headr {
    padding-right: 10px;
    text-align: right;
}

.fee-card-content {
    clear: both;
}

.fee-paramname {
    text-align: center;
    background-color: #e4eaec;
    font-size: 14px;
    color: #333;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    overflow: hidden;
    white-space:nowrap;
    height: 40px;
}

.fee-paramvalue {
    padding-left: 30px;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    overflow: hidden;
    white-space:nowrap;
    height: 40px;
}

.fee-card-contentrow {
    line-height: 40px;
    border-left: 1px solid #ddd;
    /* border-bottom: 1px solid #ddd; */
}
.feestyle{
    color: red;
}
.ivu-table td.feestyle{
         color: red;
}
</style>

<template>
    <div class="test-page">
        <product-title></product-title>
        <div class="wraper">
            <Form :model="formItem" :label-width="160" class="formitem">
                <Row>
                    <Col span="7" offset="1">
                        <FormItem label="首佣：">
                            <Input v-model="formItem.first_commission" placeholder="请输入"></Input>
                        </FormItem>
                    </Col>
                    <Col span="7" offset="1">
                        <FormItem label="首佣缓发：">
                            <Input v-model="formItem.first_commission_delay" placeholder="请输入"></Input>
                        </FormItem>
                    </Col> 
                    <Col span="7" offset="1">
                        <FormItem label="续佣：">
                            <Input v-model="formItem.continue_commission" placeholder="请输入"></Input>
                        </FormItem>
                    </Col> 
                    <Col span="7" offset="1">
                        <FormItem label="续佣缓发：">
                            <Input v-model="formItem.continue_commission_delay" placeholder="请输入"></Input>
                        </FormItem>
                    </Col> 
                    <Col span="7" offset="1">
                        <FormItem label="推荐奖金：">
                            <Input v-model="formItem.referral_bonus" placeholder="请输入"></Input>
                        </FormItem>
                    </Col> 
                    <Col span="7" offset="1">
                        <FormItem label="管理津贴：">
                            <Input v-model="formItem.management_allowance" placeholder="请输入"></Input>
                        </FormItem>
                    </Col> 
                    <Col span="7" offset="1">
                        <FormItem label="应税激励方案兑现：">
                            <Input v-model="formItem.taxable_fulfilled" placeholder="请输入"></Input>
                        </FormItem>
                    </Col>
                    <Col span="7" offset="1">
                        <FormItem label="续收督导津贴奖金：">
                            <Input v-model="formItem.allowance_bonus" placeholder="请输入"></Input>
                        </FormItem>
                    </Col> 
                    <Col span="7" offset="1">
                        <FormItem label="综合开拓佣金：">
                            <Input v-model="formItem.dev_commission" placeholder="请输入"></Input>
                        </FormItem>
                    </Col> 
                    <Col span="7" offset="1">
                        <FormItem label="税后已发（实物激励方案已兑现）" :label-width="250">
                            <Input v-model="formItem.afer_tax_issued" placeholder="请输入"></Input>
                        </FormItem>
                    </Col> 
                    <Col span="7" offset="1">
                        <FormItem label="税后扣除">
                            <Input v-model="formItem.afer_tax_deduct" placeholder="请输入"></Input>
                        </FormItem>
                    </Col> 
                    <Col span="7" offset="1">
                        <FormItem label="申请补发">
                            <Input v-model="formItem.apply_reissue" placeholder="请输入"></Input>
                        </FormItem>
                    </Col> 
                    <Col span="7" offset="1">
                        <FormItem label="保证金退款">
                            <Input v-model="formItem.deposit_refund" placeholder="请输入"></Input>
                        </FormItem>
                    </Col> 
                    <Col span="7" offset="1">
                        <FormItem label="需缓发">
                            <Input v-model="formItem.need_delay" placeholder="请输入"></Input>
                        </FormItem>
                    </Col>      
                </Row>                   
            </Form>
            <div class="fee-con">
                <div class="card fee-card">
                    <Row class="fee-card-head">
                        <Col span="24">
                            <h3>XX保险销售有限公司  佣金发放明细表</h3>
                        </Col>
                    </Row>
                    <div class="fee-card-content">
                        <Row class="fee-card-contentrow">
                            <Col span="2" class="fee-paramname">年度</Col>
                            <Col span="4" class="fee-paramvalue">2017</Col>
                            <Col span="2" class="fee-paramname">月份</Col>
                            <Col span="4" class="fee-paramvalue">9</Col>
                            <Col span="2" class="fee-paramname">姓名</Col>
                            <Col span="4" class="fee-paramvalue">张三</Col>
                            <Col span="2" class="fee-paramname">身份证号</Col>
                            <Col span="4" class="fee-paramvalue">410************750</Col>                        
                        
                            <Col span="2" class="fee-paramname">销售代码</Col>
                            <Col span="4" class="fee-paramvalue">10001</Col>
                            <Col span="2" class="fee-paramname">实驻单位</Col>
                            <Col span="4" class="fee-paramvalue">XX</Col>
                            <Col span="2" class="fee-paramname">营业部</Col>
                            <Col span="4" class="fee-paramvalue">XX营业1部</Col>
                            <Col span="2" class="fee-paramname">级别</Col>
                            <Col span="4" class="fee-paramvalue">业务经理</Col>                        
                        
                            <Col span="2" class="fee-paramname">现职状况</Col>
                            <Col span="4" class="fee-paramvalue">在职</Col>
                            <Col span="2" class="fee-paramname">税后佣金</Col>
                            <Col span="4" class="fee-paramvalue feestyle">{{afer_tax_commission/100}}</Col>
                            <Col span="2" class="fee-paramname">实发金额</Col>
                            <Col span="4" class="fee-paramvalue feestyle">{{final_pay_amount/100}}</Col>
                            <Col span="2" class="fee-paramname">缴纳增值税基数</Col>
                            <Col span="4" class="fee-paramvalue">{{vat_base/100}}</Col>
                            <Col span="2" class="fee-paramname">增值税</Col>
                            <Col span="4" class="fee-paramvalue">{{vat/100}}</Col>                        
                        
                            <Col span="2" class="fee-paramname">建税</Col>
                            <Col span="4" class="fee-paramvalue">{{construction_tax/100}}</Col>
                            <Col span="2" class="fee-paramname">教育费附加</Col>
                            <Col span="4" class="fee-paramvalue">{{education_tax/100}}</Col>
                            
                            <Col span="2" class="fee-paramname">地方教育费附加</Col>
                            <Col span="4" class="fee-paramvalue">{{local_education_tax/100}}</Col>                        
                        
                            <Col span="2" class="fee-paramname">增值税等合计</Col>
                            <Col span="4" class="fee-paramvalue">{{vat_total/100}}</Col>
                            <Col span="2" class="fee-paramname">个税基数</Col>
                            <Col span="4" class="fee-paramvalue">{{id_tax_base/100}}</Col>
                            <Col span="2" class="fee-paramname">应税所得</Col>
                            <Col span="4" class="fee-paramvalue">{{ taxable_income/100  }}</Col>
                            <Col span="2" class="fee-paramname">应交个人所得税</Col>
                            <Col span="4" class="fee-paramvalue">{{tax_payable/100}}</Col>                        
                        </Row>
                    </div>
                </div>
                <div class="card fee-card">
                    <Row class="fee-card-head">
                        <Col span="24">
                            <h3>佣金明细</h3>
                        </Col>
                    </Row>
                    <div class="fee-card-content">
                        <Row class="fee-card-contentrow">
                            <Col span="2" class="fee-paramname">首佣</Col>
                            <Col span="4" class="fee-paramvalue">{{formItem.first_commission}}</Col>
                            <Col span="2" class="fee-paramname">续佣</Col>
                            <Col span="4" class="fee-paramvalue">{{formItem.continue_commission}}</Col>
                            <Col span="2" class="fee-paramname">推荐奖金</Col>
                            <Col span="4" class="fee-paramvalue">{{formItem.referral_bonus}}</Col>
                            <Col span="2" class="fee-paramname">应税激励方案兑现</Col>
                            <Col span="4" class="fee-paramvalue">{{formItem.taxable_fulfilled}}</Col>                        
                        
                            <Col span="2" class="fee-paramname">综合开拓佣金</Col>
                            <Col span="4" class="fee-paramvalue">{{formItem.dev_commission}}</Col>
                            <Col span="2" class="fee-paramname">首佣缓发</Col>
                            <Col span="4" class="fee-paramvalue">{{formItem.first_commission_delay}}</Col>
                            <Col span="2" class="fee-paramname">续佣缓发</Col>
                            <Col span="4" class="fee-paramvalue">{{formItem.continue_commission_delay}}</Col>
                            <Col span="2" class="fee-paramname">管理津贴</Col>
                            <Col span="4" class="fee-paramvalue">{{formItem.management_allowance}}</Col>                        
                        
                            <Col span="2" class="fee-paramname">续收督导津贴奖金</Col>
                            <Col span="4" class="fee-paramvalue">{{formItem.allowance_bonus}}</Col>
                            <Col span="2" class="fee-paramname">寿佣合计</Col>
                            <Col span="4" class="fee-paramvalue">{{life_commission_total/100}}</Col>
                            <Col span="2" class="fee-paramname">佣金合计</Col>
                            <Col span="4" class="fee-paramvalue">{{commission_total/100}}</Col>                                              
                        </Row>
                        
                    </div>
                </div>
                <div class="card fee-card">
                    <Row class="fee-card-head">
                        <Col span="24">
                            <h3>加扣税明细</h3>
                        </Col>
                    </Row>
                    <div class="fee-card-content">
                        <Row class="fee-card-contentrow">
                            <Col span="2" class="fee-paramname">税后已发</Col>
                            <Col span="4" class="fee-paramvalue">{{formItem.afer_tax_issued}}（实物激励方案已兑现）</Col>
                            <Col span="2" class="fee-paramname">税后扣除</Col>
                            <Col span="4" class="fee-paramvalue">{{formItem.afer_tax_deduct}}</Col>
                            <Col span="2" class="fee-paramname">申请补发</Col>
                            <Col span="4" class="fee-paramvalue">{{formItem.apply_reissue}}</Col>
                            <Col span="2" class="fee-paramname">保证金退款</Col>
                            <Col span="4" class="fee-paramvalue">{{formItem.deposit_refund}}</Col>                        
                        
                            <Col span="2" class="fee-paramname">需缓发</Col>
                            <Col span="4" class="fee-paramvalue">{{formItem.need_delay}}</Col>                                              
                        </Row>
                        
                        
                    </div>
                </div>
                <!-- <div class="card fee-card">
                    <Row class="fee-card-head">
                        <Col span="24">
                            <h3>产品销售明细</h3>
                        </Col>
                    </Row>
                    <div class="fee-card-content">
                        <Table :columns="columns1" :data="data1"></Table>                                           
                    </div>
                </div> -->
            </div>


            <!-- <div class="result">
                    实发金额:<span style="color:red">{{final_pay_amount}}</span>
            </div> -->
        </div>
    </div>
</template>

<script>
import productTitle from '../../components/productTitle'
import { getCarList } from '../../api/car'
export default {
    data() {
        return {
            formItem:{
                first_commission:0,    //首佣
                first_commission_delay:0,   //首佣缓发
                continue_commission:0,    //续佣
                continue_commission_delay:0,   //续佣缓发：
                referral_bonus:0,  //推荐奖金：
                management_allowance:0,   //管理津贴：
                taxable_fulfilled:0,  //应税激励方案兑现：
                allowance_bonus:0,   //续收督导津贴奖金：
                dev_commission:0,   //综合开拓佣金：
                afer_tax_issued:0,  //税后已发（实物激励方案已兑现）
                afer_tax_deduct:0,  //税后扣除
                apply_reissue:0,  //申请补发
                deposit_refund:0,    //保证金退款
                need_delay:0    //需缓发
            }
        };
    },
    components: {
        productTitle
    },
    computed: {
        //寿佣合计
        life_commission_total:function(){
            return parseFloat(this.formItem.first_commission)*100 
                + parseFloat(this.formItem.first_commission_delay)*100
                + parseFloat(this.formItem.continue_commission)*100
                + parseFloat(this.formItem.continue_commission_delay)*100
                + parseFloat(this.formItem.referral_bonus)*100
                + parseFloat(this.formItem.management_allowance)*100
                + parseFloat(this.formItem.taxable_fulfilled)*100
                + parseFloat(this.formItem.allowance_bonus)*100
        },
        //佣金合计
        commission_total:function(){
            return this.life_commission_total + parseFloat(this.formItem.dev_commission)*100
        },
        //缴纳增值税基数
        vat_base:function(){
            if(this.commission_total>30900*100){
                return this.commission_total
            } else {
                return 0;
            }
        },
        //增值税  
        vat:function(){
            return parseInt((this.vat_base/1.03*0.03).toFixed(0))
        },
        //城建税  
        construction_tax:function(){
            return parseInt(this.vat*0.07)
        },
        //教育税  
        education_tax:function(){
            return parseInt(this.vat*0.03)
        },
        //地方教育费附加  
        local_education_tax:function(){
            return parseInt(this.vat*0.02)
        },
        //增值税等合计
        vat_total:function(){
            return this.vat + this.construction_tax + this.education_tax + this.local_education_tax
        },
        //个税基数
        id_tax_base:function(){
             return ((this.commission_total/1.03-this.construction_tax-this.education_tax-this.local_education_tax)*0.6).toFixed(1)
            
        },
        
        //应税所得
        taxable_income:function(){
            if(this.id_tax_base >= 4000*100){
                return parseInt((this.id_tax_base*0.8).toFixed(0));
            } else {
                return parseInt(this.id_tax_base - 800*100);
            }
        },
        //应交个人所得税
        tax_payable:function(){
            if(this.taxable_income >= 50000*100){
                return parseInt(((this.taxable_income-50000*100) * 0.4 + 30000*100 * 0.3 + 20000*100 * 0.2 ).toFixed(0))
            } else if (this.taxable_income >= 20000*100 ){
                return parseInt(((this.taxable_income-20000*100)* 0.3 + 20000*100 * 0.2).toFixed(0))
            }  else if (this.taxable_income > 0){
                return parseInt((this.taxable_income*0.2).toFixed(0))
            } else {
                return 0;
            }
        },
        //税后佣金
        afer_tax_commission:function(){
            return this.commission_total - this.vat_total - this.tax_payable
        },
        
        //实发金额
        final_pay_amount:function(){
            return this.afer_tax_commission
                + parseFloat(this.formItem.apply_reissue)*100
                + parseFloat(this.formItem.deposit_refund)*100
                - parseFloat(this.formItem.need_delay)*100
                - parseFloat(this.formItem.afer_tax_deduct)*100
                - parseFloat(this.formItem.afer_tax_issued)*100
        },
        
    },
    created() {
        
    },
    methods: {
       

    }

};
</script>
